﻿@{
    ViewData["Title"] = "Index";
    Layout = null;
}

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <link rel="stylesheet" href="~/layui/css/layui.css">
    @*引用*@
    <script src="~/Scripts/jquery-3.4.1.min.js"></script>
    <script src="~/layer/Model/appsettings.js"></script>
    <script src="~/layui/layui.js"></script>
    <style>
        dd {
            cursor: pointer;
        }

        .demo-carousel {
            height: 200px;
            line-height: 200px;
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="layui-inline">
        <label class="layui-form-label">角色名称</label>
        <div class="layui-input-inline">
            <input type="text" id="name" name="name" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-inline">
        <button type="submit" id="button" class="layui-btn layui-btn-primary"><i class="layui-icon"></i> 搜 索</button>
    </div>




    <table class="layui-hide" id="demo" lay-filter="test"></table>
    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">权限配置</a>
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除</a>
    </script>
    <script>
        layui.config({
            version: '1606182314890' //为了更新 js 缓存，可忽略
        });

        layui.use(['laydate', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element', 'slider'], function () {
            var layer = layui.layer //弹层
                , table = layui.table //表格

            //执行一个 table 实例
            table.render({
                elem: '#demo'
                //, height: 400
                //,width:990
                , url: '/Setup/Indexme' //数据接口
                , title: '角色管理'
                ,id:'RoleTable'
                , page: true //开启分页
                ,parseData: function(res){ //res 即为原始返回的数据
                    let resData = res;
                }
                , toolbar: 'default' //开启头工具栏，此处显示默认图标，可以自定义模板，详见文档
                , limit: 3
                , limits: [3, 4, 5, 6]
                , cols: [[ //表头
                   { type: 'checkbox', fixed: 'left' }//锁定第一列

                   , { field: 'id', title: '角色编号',width:100}
                   , { field: 'name', title: '角色名称',width:150}
                   , { field: 'pid', title: '上级角色'}
                   , { field: 'roleAlias', title: '别名' }
                    , { field: 'setTime', title: '创建时间', templet: "<div>{{layui.util.toDateString(d.setTime, 'yyyy-MM-dd HH:mm')}}</div>"}
                    , { fixed: 'right',  title: '操作',width: 175, align: 'center', toolbar: '#barDemo' }
                ]]
            });


            //监听头工具栏事件
            table.on('toolbar', function (obj) {
                var checkStatus = table.checkStatus(obj.config.id)
                    , data = checkStatus.data; //获取选中的数据
                switch (obj.event) {
                    case 'add':
                        layer.msg('添加');
                        location.href = "/Setup/AddRole/"
                        break;
                    case 'update':
                        break;
                    case 'delete':
                        if (data.length === 0) {
                            layer.msg('请选择一行');
                        }

                        else {   
                             var ids=[];
                            $(data).each(function(){
                                ids.push(this.id);
                            })
                            $.ajax({
                                url: "/Setup/Pdelete?ids=" +ids.toString(),
                                type: "delete",
                                dataType: "json",
                                success: function (obj) {
                                if (obj > 0) {
                                     alert("删除成功")
                                     location.reload()
                                    }
                                else {
                                     alert("删除失败")
                                 }
                              }
                        })
                        }
                        break;
                };
            });


            //监听行工具事件
            table.on('tool(test)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"

                var data = obj.data //获得当前行数据
                    , layevent = obj.event; //获得 lay-event 对应的值
                if (layevent === 'detail') {
                    layer.open({
                        type: 2,
                        title: '权限分配',
                        skin: 'layui-layer-rim', //加上边框
                        area: ['500px', '500px'], //宽高
                        content: '/Setup/RoleQx?id=' + data.id,
                    });

                } else if (layevent === 'delete') {
                    layer.confirm('真的删除行么', function (index) {
                          $.ajax({
                                url: "/Setup/DeleteIdas?id=" + data.id,
                                Type: "delete",
                                data: "json",
                                success: function (obj) {
                                    if (obj > 0) {
                                        alert("删除成功！！！");
                                        location.reload();
                                    }
                                    else {
                                        alert("删除失败")
                                    }
                                }
                            })

                    });
                } else if (layevent === 'edit') {
                    var id = data.id;
                     location.href="/Setup/FanTian?id="+ id
                }
            });


            $("#button").click(function(){
             var name = $("#name").val();
           table.reload('RoleTable', {
            url: '/Setup/Indexme'
            ,where: {
                 name : name
            }
            ,page: {
                 curr: 1
            }
            });
        })

        });

    </script>
</body>